import { ConfigProvider as SemiConfigProvider } from "@douyinfe/semi-ui";
import { ConfigProvider, Modal, Drawer } from "antd";
import { useModel, Outlet, useLocation } from "umi";
import dayjs from "dayjs";
import zhCN from "antd/es/locale/zh_CN";
import zh_CN from "@douyinfe/semi-ui/lib/es/locale/source/zh_CN";
import "dayjs/locale/zh-cn";

import MainPageLayout from "./main";
import MessagesLayout from "./messages";
import TodoTasksLayout from "./todotasks";

dayjs.locale("zh-cn");

const MainLayout = () => {
    const { modalVisible, modalTitle, modalWidth, modalComponent, modalStyle, onCloseGlobalModal } = useModel("global.modal");
    const { drawerVisible, drawerTitle, drawerWidth, drawerHeight, drawerComponent, drawerPlacement, drawerFooter, drawerClosable } = useModel("global.drawer");
    const { onCloseGlobaldrawer, drawerMask, drawerMaskClosable } = useModel("global.drawer");

    const location = useLocation();

    let paths = location.pathname.substr(1).split("/");

    let LayoutComponent = MainPageLayout;

    if (paths.length && paths[0]) {
        switch (paths[0]) {
            case "messages":
                LayoutComponent = MessagesLayout;
                break;
            case "todotasks":
                LayoutComponent = TodoTasksLayout;
                break;
            default:
                break;
        }
    }

    return (
        <ConfigProvider locale={zhCN}>
            <SemiConfigProvider locale={zh_CN}>
                <LayoutComponent>
                    <Outlet />
                </LayoutComponent>
                <Drawer
                    title={drawerTitle}
                    placement={drawerPlacement}
                    height={drawerHeight}
                    width={drawerWidth}
                    closable={drawerClosable}
                    destroyOnClose={true}
                    onClose={onCloseGlobaldrawer}
                    open={drawerVisible}
                    getContainer={() => document.getElementById("main-body")}
                    mask={drawerMask}
                    maskClosable={drawerMaskClosable}
                    rootStyle={{ position: "absolute", top: 32 }}
                    footer={drawerFooter}
                >
                    {drawerComponent || ""}
                </Drawer>
                <Modal
                    title={modalTitle}
                    closable={modalTitle !== null}
                    destroyOnClose={true}
                    centered={!modalStyle}
                    style={modalStyle}
                    maskClosable={false}
                    footer={null}
                    open={modalVisible}
                    width={modalWidth}
                    okText="确认"
                    cancelText="取消"
                    onCancel={onCloseGlobalModal}
                >
                    {modalComponent || ""}
                </Modal>
            </SemiConfigProvider>
        </ConfigProvider>
    );
};

export default MainLayout;
